/*jQuery时间绑定必须放置在函数中（1.jQuery页面初始加载事件）2.js函数中*/
/* $等同于jQuery */
$(function(){
	init();
	$(".del").click(function(){
		if(confirm("确定删除当前数据吗？")){
			var del = $(this).parent().parent().remove();
		}else{}
		// console.log($(this).parent().parent().html());
	});
	
	
	$(".qwe").click(function(){
		$("#ta").toggle();
	});
	
	
	//jQuery鼠标移进（mouseover，mouseenter）、移出事件（mouseout、mouseleave）
	//mouseover和mouseout一套使用，mouseenter和mouseleave一套使用
	//mouseover和mouseenter区别：
	//mouseover事件在鼠标移动到选取的元素及其子元素上时触发
	//mouseenter事件只在鼠标移动到选取的元素上时触发
	
	//需求：鼠标移动到当前显示行，加深背景颜色
	$("tbody tr").mouseover(function(){
		// $(this).css("background-color","red");
		$(this).addClass("bg");
	});
	$("tbody tr").mouseout(function(){
		// $(this).css("background-color","red");
		$(this).removeClass("bg");
	});
	
	//鼠标
	$("tbody tr").hover(function(){
		
		$(this).css("font-size","17px");
	},function(){
		$(this).css("font-size","15px");
	});
	
	$(".sea").click(function(){
		//获取搜索文本框值
		var $search = $(".select_input").val();
		// console.log("$search:"+$search);
		if($search == ''){
			//默认查询所有
			init();
		}
		var $markNo = $(".markNo");
		// console.log($markNo.length);
		//循环遍历
		$markNo.each(function(i){
			var mNo = $($markNo.get(i)).text();
			// console.log(mNo);
			if($search == mNo){
				// console.log(i);
				var $ul = $("tbody tr").eq(i);
				$("tbody").html($ul);
			}
		});
	});
});
/*初始加载数据*/
function init(){
	//初始加载列表数据
	//js操作dom元素 --> jQuery也可操作dom元素
	//ECMAScript 简称ES
	//使用json数据存储一个对象
	var jsonUl={"route":"成都市内亲子游",
				"type":"自由行",
				"price":"200.00",
				"phone":"13574556682",
				"phoneOwner":"章若阳",
				"createDate":"2021-08-07"};
	var jsonUlArrs = [
		{
				"route":"峨眉山·九寨沟轻松游",
				"type":"纯玩团",
				"price":"500.00",
				"phone":"16833556681",
				"phoneOwner":"孙媚",
				"createDate":"2021-08-05"},
				
		{		"route":"都江堰·青城山一日游",
				"type":"自由行",
				"price":"100.00",
				"phone":"18774556690",
				"phoneOwner":"王释晖",
				"createDate":"2021-08-04"}
	];
	
	let $tr=`<tr>
					<td>${jsonUl.route}</td>
					<td>${jsonUl.type}</td>
					<td class="markNo">${jsonUl.price}</td>
					<td>${jsonUl.phone}</td>
					<td>${jsonUl.phoneOwner}</td>
					<td>${jsonUl.createDate}</td>
					<td>
						<a href="#" class="qwe">详情&nbsp;</a>
						<a href="javascript:void(0);" class="del">删除</a>
					</td>
			</tr>`;
	//循环遍历json对象数据
	var $ulStr="";
	$(jsonUlArrs).each(function(index){
		/*清空tbody层*/
		$("tbody").empty();
		var arrJson = jsonUlArrs[index];
		$ulStr +=`<tr>
					<td>${arrJson.route}</td>
					<td>${arrJson.type}</td>
					<td class="markNo">${arrJson.price}</td>
					<td>${arrJson.phone}</td>
					<td>${arrJson.phoneOwner}</td>
					<td>${arrJson.createDate}</td>
					<td>
						<a href="#" class="qwe">详情&nbsp;</a>
						<a href="javascript:void(0);" class="del">删除</a>
					</td>
			</tr>`;
	});
	$("tbody").append($tr);
	$("tbody").append($ulStr);
}
/*js自定义函数*/
// function check(){}
function oncl(){
	
}